<template>
  <div>
    <div class="profile-info body-content">
      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          姓名&nbsp;<span class="color-red">*</span>
        </div>
        <div class="tiny-light color-grey">员工可自行修改</div>
        <div class="profile-info-content paragraph-p2-light">
          <input type="text" v-model="profile.username" class="profile-info-content-input" placeholder="请填写"/>
        </div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          电话号码&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">
          <input type="tel" v-model="profile.mobile" class="profile-info-content-input" :disabled="!loginUser.isAdmin" placeholder="请填写"
                 @keydown="handleInput" @change="handleInput" @input="handleInput"/>
        </div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          邮箱&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light">
          <input type="email" :disabled="!loginUser.isAdmin" v-model="profile.mail" class="profile-info-content-input" placeholder="请填写"/>
        </div>
      </div>

      <div v-if="$route.query.type" class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          密码&nbsp;<span class="color-red">*</span>
        </div>
        <div class="profile-info-content paragraph-p2-light div-align-justify-center"
             @click="changePassword">
          <span class="profile-info-content-left">••••••••••••••••</span>
          <img class="icon-24" src="@/static/icon/chevron_right.png" alt=""/>
        </div>
      </div>

      <div v-else class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">
          密码&nbsp;<span class="color-red">*</span>
        </div>
        <div class="tiny-light color-grey">8-16位，字母+数字组合</div>
        <div class="profile-info-content-password paragraph-p2-light div-align-justify-center">
          <input v-model="profile.password" class="profile-info-content-input-password" :type="ifShowPwd ? 'text' : 'password'" placeholder="请输入密码"/>
          <img v-if="!ifShowPwd" class="icon-20 padding-right-4" src="@/static/icon/20px_eye_closed.png" @click="ifShowPwd = !ifShowPwd" alt=""/>
          <img v-if="ifShowPwd" class="icon-20 padding-right-4" src="@/static/icon/20px_eye_open.png" @click="ifShowPwd = !ifShowPwd" alt=""/>
        </div>
      </div>

      <div class="profile-info-div">
        <div class="profile-info-title paragraph-p2-heavy">系统头像</div>
        <div class="tiny-light color-grey">员工可自行修改</div>
        <div class="margin-top-div-12">
          <field-avatar ref="avatarFieldUploader" :avatar="profile.avatar" ></field-avatar>
        </div>
      </div>

      <div v-if="loginUser.isAdmin && profile.id && profile.id !== loginUser.id" class="red-button div-align-justify-center" @click="setInactive">
        <img class="icon-16" src="@/static/icon/16px_staff_exit.png" alt="">
        <span class="paragraph-p2-light margin-left-4">办理离职</span>
      </div>
    </div>
    <button-center v-if="!profile.id" :button-name="'创建员工账号'"
                   :disable="!profile.username || !profile.password || !profile.mobile || !profile.mail"
                   @click.native="addProfile"
    ></button-center>
  </div>
</template>
<script>
import ButtonCenter from "@/components/Button/Center";
import {addStaff, editStaff, getMyProfile, setInactive} from "@/request/api";
import {Toast} from "vant";
import FieldAvatar from "@/components/Field/avatar";
export default {
  name: "ProfileEdit",
  components: {
    FieldAvatar,
    ButtonCenter
  },
  data() {
    return {
      ifShowDetail: true,
      ifShowPwd: false,
      loginUser: this.$baseJS.getLoginUser(),
      profile: {
        id: this.$route.params.id,
        username: '',
        password: '',
        mobile: '',
        mail: '',
        avatar: '',
      },
    };
  },
  mounted() {
    if (this.profile.id) {
      this.getMyProfile()
    }
  },
  methods: {
    handleInput(e) {
      let a = e.key.replace(/[^\d]/g, "");
      if (!a && e.keyCode !== 8) {
        e.preventDefault();
      }
    },
    changePassword() {
      if (this.$baseJS.getLoginUser().isAdmin) {
        this.$router.push({path: this.GLOBAL.pathSetting.profile.password + this.profile.id})
      }
    },
    getMyProfile() {
      getMyProfile({ pathParam: this.profile.id }).then(res => {
        const { State, Msg, Data } = res
        if (State) {
          const { name, email, phone_number, password, head_image_url } = Data
          this.profile.username = name
          this.profile.password = password
          this.profile.mobile = phone_number
          this.profile.mail = email
          this.profile.avatar = head_image_url
        } else {
          Toast(Msg)
        }
      })
    },
    setInactive() {
      setInactive({ pathParam: this.profile.id }).then(res => {
        const { State, Msg } = res
        if (State) {
          this.$router.push(this.GLOBAL.pathSetting.profile.main)
        } else {
          Toast(Msg)
        }
      })
    },
    addProfile() {
      let param = {
        name: this.profile.username,
        phone_number: this.profile.mobile,
        email: this.profile.mail,
        password: this.profile.password,
        head_image_url: this.$refs.avatarFieldUploader.getAvatar()
      }
      if (param.name && param.phone_number && param.email && param.password) {
        if (!this.$baseJS.checkEmail(param.email)) {
          Toast("请输入正确的邮箱")
        } else if (param.phone_number.length < 8 || param.phone_number.length > 12) {
          Toast("请输入正确的电话")
        } else {
          addStaff(param).then(res => {
            const { State, Msg } = res
            if (State) {
              this.$router.push(this.GLOBAL.pathSetting.profile.main)
            } else {
              Toast(Msg)
            }
          })
        }
      }

    },
    editProfile() {
      let param = {
        pathParam: this.profile.id,
        name: this.profile.username,
        phone_number: this.profile.mobile,
        email: this.profile.mail,
        head_image_url: this.$refs.avatarFieldUploader.getAvatar()
      }
      if (!this.$baseJS.checkEmail(param.email)) {
        Toast("请输入正确的邮箱")
        return false
      } else if (param.phone_number.length < 8 || param.phone_number.length > 12) {
        Toast("请输入正确的电话 8-12位")
        return false
      } else {
        editStaff(param).then(res => {
          const { State, Msg } = res
          if (State) {
            this.$emit("profileEditToMain")
          } else { Toast(Msg) }
        })
      }
    },
  },
};
</script>

<style scoped>
.profile-info {
  background: #E5E5E5;
  padding: 8px 16px;
  height: 725px;
}
.profile-info-div {
  padding: 12px 12px;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin-top: 8px;
}

.profile-info-title {
  height: 22px;
  color: #242424;
}

.img-cycle-64 {
  height: 64px;
  width: 64px;
  border-radius: 32px;
}

.profile-info-content-left {
  padding-left: 12px;
  width: 90%;
}

.profile-info-content {
  margin-top: 18px;
}
.profile-info-content-password {
  background: #F5F5F5;
  border-radius: 4px;
  height: 42px;
}
.profile-info-content-input {
  background: #F5F5F5;
  border-radius: 4px;
  height: 42px;
  width: 95%;
  border: none;
}
.profile-info-content-input-1 {
  background: #F5F5F5;
  border-radius: 4px;
  height: 42px;
  width: 95%;
  border: none;
}
.profile-info-content-input-password {
  height: 36px;
  background: #F5F5F5;
  width: 90%;
  border: none;
}
input {
  padding-left: 12px;
}
input::-webkit-input-placeholder {
  padding-left: 12px;
}
.red-button {
  width: 90px;
  height: 22px;
  left: calc(50% - 76px/2 + 0.5px);
  padding: 32px 132px;

  margin-bottom: 70px;
}

.red-button > span {
  padding-left: 4px;
}
</style>
